import React, { useEffect, useState } from 'react';
import {
  Form,
  Modal,
  Grid,
  Input,
  InputNumber,
  TimePicker,
  Select,
  TreeSelect,
  Checkbox,
} from '@arco-design/web-react';
import * as Model from '@/services/model';
import Api from '@/services/api';
const { useForm } = Form;
const { Row, Col } = Grid;
interface DetailModalProps {
  userInfo?: Model.User | false;
  onCancel: () => void;
  onOk: (params: Model.User) => void;
}

const generateTreeData = (list) => {
  return list.map((e) => {
    const children = Array.isArray(e.children)
      ? generateTreeData(e.children)
      : null;
    return { ...e, key: e.id, title: e.name, children };
  });
};

export const DetailModal = (props: DetailModalProps) => {
  const [form] = useForm();
  const [treeData, setTreeData] = useState([]);
  const [loading, setLoading] = useState(true);

  const fetchData = async () => {
    setLoading(true);
    const res = await Api.orgnizeList({}).catch(() => {
      return false;
    });
    if (res) {
      setTreeData(generateTreeData(res.list));
    }
    setLoading(false);
  };

  useEffect(() => {
    if (props.userInfo !== false) {
      form.setFieldsValue(props.userInfo);
      fetchData();
    }
  }, [props.userInfo]);

  const submit = async () => {
    const res = await form.validate();
    if (res) {
      props.onOk(res);
    }
  };
  return (
    <Modal
      visible={props.userInfo !== false}
      title={`${props.userInfo && props.userInfo.id ? '修改' : '新增'}道口`}
      mountOnEnter
      unmountOnExit
      onCancel={props.onCancel}
      onOk={submit}
      alignCenter={false}
      okText="提交"
      cancelText="取消"
      style={{ width: 600 }}
    >
      <Form
        form={form}
        labelAlign="left"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
      >
        <Row gutter={24}>
          <Col span={24}>
            <Form.Item label="用户名" field="name" required>
              <Input placeholder="请输入卸货区" allowClear />
            </Form.Item>
          </Col>
          <Form.Item
            labelCol={{ flex: 'none', style: { width: 145 } }}
            wrapperCol={{ flex: 'none' }}
            label="是否超级管理员："
            field="administrator"
            triggerPropName="checked"
            required
          >
            <Checkbox />
          </Form.Item>

          <Col span={24}>
            <Form.Item shouldUpdate noStyle>
              {(values) => {
                console.log(values);
                if (values.administrator) {
                  return null;
                } else {
                  return (
                    <Form.Item shouldUpdate label="角色" field="role" required>
                      <Select placeholder="请选择角色">
                        <Select.Option value="administer">
                          管理员A
                        </Select.Option>
                        <Select.Option value="factoryMaster">
                          管理员B
                        </Select.Option>
                        <Select.Option value="workshopManager">
                          管理员C
                        </Select.Option>
                        <Select.Option value="truckDriver">
                          管理员D
                        </Select.Option>
                      </Select>
                    </Form.Item>
                  );
                }
              }}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="部门" field="orgnize" required>
              <TreeSelect
                treeCheckable
                treeCheckStrictly
                treeData={treeData}
                placeholder="请输入父级组织"
                allowClear
                multiple
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
